<template>
  <el-container>
    <el-col style="background: #9C3;" :span="24">
      <el-col :span="24">
        <el-col :span="24" style="background: #fff;padding-bottom: 20px;height: 40px;border-bottom: 1px solid #ccc">
          <el-col  :span="24" style="padding-top: 5px">
            <el-col :span="15">&emsp;</el-col>
            <div v-if="user == null || user == undefined">
              <el-link @click="loginUser">登录</el-link>
              |
              <el-link @click="registerUser">注册</el-link>
            </div>

            <div v-if="user != null || user != undefined">
              <img  style="width: 30px;height: 30px" :src="$image + user.avatar"/>
              <el-link style="margin-top: -20px" >{{user.username}} |</el-link>
              <el-link style="margin-top: -20px" @click="centerUser">个人中心 |</el-link>
              <el-link style="margin-top: -20px" @click="loginOut">登出</el-link>
            </div>
          </el-col>
        </el-col>
        <el-col :span="24" style="background: #fff;padding-bottom: 20px;height: 80px">
          <el-col :span="24" style="padding-top: 5px">
            <el-col :span="7">&emsp;</el-col>
            <el-form ref="form" :model="addParam" label-width="120px" style="margin-top: 10px">
              <el-form-item label="">
                <el-input style="width:35%" placeholder="请输入词条/文章/问题关键字" v-model="addParam.queryName">
                  <template slot="append">
                    <el-button type="primary" @click="query">搜索</el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="6">&emsp;</el-col>
          <el-header style="height: 40px">
            <el-menu style="background: #9C3;font-weight: bold" active-text-color="#000" text-color="#fff"
                     :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                     @select="handleSelect">
              <el-menu-item index="0">首页</el-menu-item>
              <el-menu-item index="1">文章</el-menu-item>
              <el-menu-item index="2">咨询</el-menu-item>
              <el-menu-item index="3">视频</el-menu-item>
            </el-menu>
          </el-header>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-main>
          <el-col :span="24">
            <el-col :span="leftSpanRight">&emsp;</el-col>
            <el-col :span="contentBody">
              <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
                <el-breadcrumb-item :to="{ path: '/userHome/default/1' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-if="item.name != 99999" v-for="(item,index) in $route.matched" :key="index">
                  <strong>{{item.name}}</strong>
                </el-breadcrumb-item>
                <el-breadcrumb-item> <span @click="back" style="cursor: pointer;color: blue">返回</span></el-breadcrumb-item>
              </el-breadcrumb>
              <router-view @testHome="testHome" :key="keyIndex"/>
            </el-col>
            <el-col :span="leftSpanRight">&emsp;</el-col>
          </el-col>
        </el-main>
      </el-col>
    </el-col>
  </el-container>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        activeIndex: '0',
        leftSpanRight:6,
        contentBody:12,
        addParam: {
          queryName: ''
        },
        user: {},
        keyIndex: 1,
        initSelect: {
          content_type: [{label: '饲养', value: 1}, {label: '医疗', value: 2}, {label: '训练', value: 3}],
          contentRoute: {
            0: '/userHome/default/0',
            1: '/article/default/1',
            2: '/info/default/2',
            3: '/video/default/3',
          },
        }
      }
    },
    props:['index'],
    created() {
      console.log("*-*-*-*-*" + this.index)
      if(this.index == 1){
        this.$router.push('/userHome/default/1')
      }
      this.index = 0
      /**判断是否登录*/
      let user = JSON.parse(sessionStorage.getItem("userInfo"));
      this.user = user;
    },
    methods: {
      query(){
        if(this.addParam.queryName.length < 1){
          this.$message.error("当前为输入搜索条件，请输入！")
          return false
        }
        this.keyIndex = this.addParam.queryName
        this.$router.push({path: '/more/moreQuery/' + this.addParam.queryName})
      },
      back(){this.$router.go(-1);},
      testHome(){
          this.leftSpanRight = 0
          this.contentBody = 24
      },
      loginOut(){
        this.$alert('您确定要退出吗？', '退出提示', {
          confirmButtonText: '确定',
          callback: action => {
            // localStorage.removeItem('token')
            this.keyIndex = 99
            localStorage.clear()
            sessionStorage.removeItem("userInfo")
            this.$router.push('/userHome/1')
            window.location.reload()
          }
        })
      },
      centerUser() {
        this.$router.push({path: '/center/home'})
      },
      loginUser() {
        this.$router.push({path: '/login'})
      },
      registerUser() {
        this.$router.push({path: '/userHome/register'})
      },
      handleSelect(key, keyPath) {
        this.leftSpanRight = 6
        this.contentBody = 12
        this.keyIndex = key
        this.$router.push(this.initSelect.contentRoute[key])
      },
      toDts() {
        this.$router.push({path: '/userHome/contentDts/常见的猎犬都有哪些？'})
      }
    }
  }
</script>

<style scoped>
  .el-menu-item.is-active {
    /*background-color: #000;*/
  }

  .el-menu--horizontal >>> .el-menu-item:not(.is-disabled):hover {
    background: #7B0 !important;
    color: #000;
    font-weight: bold;
    border-bottom: 1px solid #fff !important;
  }

  .el-menu-item:hover {
    background-color: #000;
  }

  .el-header, .el-footer {
    background-color: #9C3;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #fff;
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 160px;*/
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
